<template>
  <div style="margin-bottom: 10px">
    <el-input v-model="pagination.name" placeholder="通过文章名字进行查找" style="width: 200px;"
              prefix-icon="el-icon-search"
              @keyup.enter.native="getAll()"></el-input>
    <el-button type="primary" style="margin-left: 5px;" @click="getAll()">查询</el-button>
    <!--    <el-button type="success" style="margin-left: 5px;" @click="reset">重置</el-button>-->
    <el-button type="success" style="margin-left: 5px;" @click="add">新增</el-button>

    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(255,255,255)',color:'#000000'}"
        :row-style="{height:'40px'}"
        style="text-align: center;"
        border="2">
      <el-table-column
          prop="id"
          label="id"
          width="50px">
      </el-table-column>
      <el-table-column
          prop="name"
          label="图片名字"
          width="250px">
      </el-table-column>
      <el-table-column
          prop="image"
          label="图片地址"
          width="200px">
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="update(scope.row)">编辑</el-button>
          <el-popconfirm
              title="确定删除吗？"
              @confirm="remove(scope.row.id)"
              style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="pagination"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10,20]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="id">
          <el-col :span="10">
            <el-input v-model="form.id" disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="图片名字">
          <el-col :span="10">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remove">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "image",
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        //以下用于查询
        name: ''
      },
      form: {
        id: '',
        name: '',
      },
    }
  },
  mounted() {
    // this.loadGet();
    /*this.loadPost();*/
    this.getAll()
  },
  methods: {
    /*    async loadGet() {
          this.$axios.get(this.$httpUrls + '/image/all').then(res => res.data).then(res => {
            console.log(res);
            this.tableData = res;
          })
        },*/
    getAll() {
      /*      this.$axios.post(this.$httpUrls + "/image/page/?name=" + this.name + "&?page=" + this.size, {
              page: this.page,
              size: this.size,
              name: this.name,
            }).then(resp => {
              console.log(resp.data.data);
              this.tableData = resp.data.data;
              this.total = resp.data.data;
            })*/
      //组织参数，拼接url请求地址
      let param = "?name=" + this.pagination.name
      console.log(param)
      //发送异步请求到controller
      this.$axios.get(this.$httpUrls + "/image/" + this.pagination.currentPage + "/" + this.pagination.pageSize + param).then((res) => {
        console.log(res)
        this.pagination.pageSize = res.data.data.size;
        this.pagination.currentPage = res.data.data.current;
        this.pagination.total = res.data.data.total;
        this.tableData = res.data.data.records
      })
    },
    /*    reset() {
          this.name = ''
          this.$axios.get(this.$httpUrls + '/image/all').then(res => res.data).then(res => {
            console.log(res);
            this.tableData = res;
          })
        },*/
    update(row) {
      console.log(row)
      this.form.id = row.id
      this.form.name = row.name
      this.centerDialogVisible = true
    },
    remove(id) {
      console.log(id)
      this.$axios.post(this.$httpUrls + '/image/delete?id=' + id).then(resp => {
        console.log(resp.data.data)
        if (resp.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
        }
      })
    },
    dosave() {
      this.$axios.post(this.$httpUrls + "/image/Obscure", this.form).then(resp => {
        console.log(resp.data.data)
        if (resp.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
        }
      })
    },
    save() {
      if (this.form.name) {
        this.dosave()
      }
    },
    sizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pagination.pageSize = size;
      this.getAll();
    },
    currentChange(page) {
      console.log(`当前页: ${page}`);
      this.pagination.currentPage = page;
      this.getAll();
    },
    add() {
      this.$router.replace('/image_add')
    },
  },
  beforeMount() {
    this.loadPost();
    this.reset();
  }
}
</script>

<style scoped>

</style>